<script lang="ts" setup>
import { ref , defineEmits} from "vue" 

const emit = defineEmits(['search','reset'])

const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },

  hasPermi:{
    type:String,
    default:''
  },
//   btnArray:{
//     type:Array,
//     default:()=>[
//   {
//     name:'查询',
//     type:"primary"
//   },
//   {
//     name:'重置',
//     type:""
//   }

// ]
//   },
  queryParams:{
    type:Object,
    default:()=>{}
  }
})

onMounted(()=>{
  console.log(props.hasPermi,'props')
})

watch(props.queryParams.value,(newVal)=>{
  console.log(newVal,'newVal')
})

const onSearch = ()=>{
  emit('search')
}

const onReset = ()=>{
  emit('reset')
}

console.log()
</script>

<template>
 <div class="from-container">
    <div class="from-title-container">
      <span>
        {{ props.title }}
      </span>
    </div>

    <div class="title-btn-container" >
      <el-button type="primary" v-hasPermi="[hasPermi]" @click="onSearch">查询</el-button>
      <el-button @click="onReset">重置</el-button>
    </div>
 </div>
</template>

<style lang="scss" scoped>
  .from-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20PX;

    .from-title-container{
      font-size: 16px;
      font-weight: 700;
    }

    .title-btn-container{
      display: flex;
      align-items: center;
    }


    .title-btn-container{
      display: flex;
    }
  }
</style>